<template>
    <div>
        <Header></Header>
        <Search :citys="citys"></Search>
        <List :citys="citys" :hotCitys="hotCitys" :letter="letter"></List>
        <Alphabet :citys="citys" @change="change"></Alphabet>
    </div>
</template>

<script>
    import axios from 'axios'
		import Header from './components/header'
    import Search from './components/search'
    import List from './components/list'
    import Alphabet from './components/alphabet'
    export default {
      name:'City',
      components:{
      	Header,
        Search,
        List,
        Alphabet
      },
      data(){
        return{
          citys:{},
          hotCitys:[],
          letter:'',
        }
      },
      methods:{
        change(letter){
          this.letter=letter;
        },
        getCityInfo(){
          axios.get('/api/city.json')
            .then(res=>{
              res=res.data;
              if(res.ret){
                this.citys=res.data.cities;
                this.hotCitys=res.data.hotCities;
              }
            })
        }
      },
      mounted(){
        this.getCityInfo();
      }
    }
</script>

<style scoped lang="stylus">
</style>